<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
</head>

<body>
    <div id='app'>
        <ul>
            <li v-for="(items ,k) in obj" :key='items.id'>
                <input type="checkbox" v-model='items.flag' @change='chk'>
                <span>品牌：{{items.name}}</span>
                <span>价格：{{items.price}}</span>
                <span>数量：{{items.num}}</span>
                <div>{{items.flag}}</div>
            </li>
        </ul>
        <p>总价：{{total}}元</p>

    </div>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                total: 0,
                obj: [{
                    id:1,
                    name: 'AJ',
                    price: 10,
                    num: 1,
                    flag: false
                }, {
                    id:2,
                    name: 'lining',
                    price: 20,
                    num: 2,
                    flag: false
                }, {
                    id:3,
                    name: 'anta',
                    price: 30,
                    num: 3,
                    flag: false
                }, {
                    id:4,
                    name: '361',
                    price: 40,
                    num: 4,
                    flag: false
                },]
            },
            methods: {
                chk() {
                    this.total = 0,
                    this.obj.forEach(A => {
                        if (A.flag == true) {
                            this.total += Number(A.price) * Number(A.num)
                        }
                    });
                }

            },
        });
    </script>
</body>

</html>